<template>
  <div class="asset-machine-monitor-check">
    <Form
      :label-width="100"
      :model="formData"
      :rules="formRule"
      ref="formValidate"
      inline
      class="asset-manage-makerpn-info"
    >
      <div class="ivu-table ivu-table-default  ivu-table-noborder">
        <div class="ivu-table-body table-border-none">
          <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
            <tbody class="ivu-table-tbody">
              <tr class="ivu-table-row">
                <td colspan="2">
                  <div class="ivu-table-cell">
                    <h3 class="title"><span class="title-icon"></span> <span>基本信息</span></h3>
                  </div>
                </td>
              </tr>
              <tr class="ivu-table-row">
                <td class="none-border">
                  <div class="ivu-table-cell">
                    <FormItem prop="purchaseType" label="故障机台：">
                      <Input disabled v-model="formData.machineInstanceName" class="input-width" />
                    </FormItem>
                  </div>
                </td>
                <td class="none-border">
                  <div class="ivu-table-cell">
                    <FormItem prop="purchaseTime" label="游戏位：">
                      <Input disabled v-model="formData.machineInstanceSlotNo" class="input-width" />
                    </FormItem>
                  </div>
                </td>
              </tr>
              <tr class="ivu-table-row">
                <td class="none-border">
                  <div class="ivu-table-cell">
                    <FormItem prop="pnCode" label="机台供应商：">
                      <Input disabled v-model="formData.supplyName" class="input-width" />
                    </FormItem>
                  </div>
                </td>
                <td class="none-border">
                  <div class="ivu-table-cell">
                    <FormItem prop="purchaseAmount" label="资产编码：">
                      <Input disabled v-model="formData.snCode" class="input-width" />
                    </FormItem>
                  </div>
                </td>
              </tr>

              <tr class="ivu-table-row">
                <td></td>
                <td></td>
              </tr>

              <tr class="ivu-table-row">
                <td colspan="2">
                  <div class="ivu-table-cell">
                    <h3 class="title"><span class="title-icon"></span> <span>故障诊断</span></h3>
                  </div>
                </td>
              </tr>
              <tr class="ivu-table-row">
                <td class="none-border">
                  <div class="ivu-table-cell">
                    <FormItem prop="faultLevel" label="故障等级：">
                      <Select v-model="formData.faultLevel" transfer placeholder="请选择" class="input-width">
                        <Option v-for="item in faultLevelKey" :value="item.value" :key="item.value">{{
                          item.label
                        }}</Option>
                      </Select>
                    </FormItem>
                  </div>
                </td>
                <td class="none-border">
                  <div class="ivu-table-cell">
                    <FormItem prop="faultType" label="对应故障：">
                      <Select v-model="formData.faultType" transfer placeholder="请选择" class="input-width">
                        <Option v-for="item in faultLevelValue" :value="item.value" :key="item.value">{{
                          item.label
                        }}</Option>
                      </Select>
                    </FormItem>
                  </div>
                </td>
              </tr>
              <tr class="ivu-table-row">
                <td colspan="2" class="none-border">
                  <div class="ivu-table-cell">
                    <FormItem prop="faultStatus" label="处理结果：">
                      <Select v-model="formData.faultStatus" transfer placeholder="请选择" class="input-width">
                        <Option v-for="item in faultStatusList" :value="item.value" :key="item.value">{{
                          item.label
                        }}</Option>
                      </Select>
                    </FormItem>
                  </div>
                </td>
              </tr>
              <!-- v-if="formData.faultStatus == 2" -->

              <template v-if="formData.faultStatus == 2">
                <tr class="ivu-table-row">
                  <td></td>
                  <td></td>
                </tr>

                <tr class="ivu-table-row">
                  <td colspan="2">
                    <div class="ivu-table-cell">
                      <h3 class="title"><span class="title-icon"></span> <span>故障申报</span></h3>
                    </div>
                  </td>
                </tr>
                <tr class="ivu-table-row">
                  <td class="none-border">
                    <div class="ivu-table-cell">
                      <FormItem prop="repairPart" label="维修部位：">
                        <Input v-model="formData.repairPart" placeholder="请输入维修部位" class="input-width" />
                      </FormItem>
                    </div>
                  </td>
                  <td class="none-border">
                    <div class="ivu-table-cell">
                      <FormItem prop="quantity" label="数量：">
                        <!-- <Select v-model="formData.quantity" transfer placeholder="请选择" class="input-width">
                        <Option v-for="item in purchaseTypeData" :value="item.value" :key="item.value">{{
                          item.label
                        }}</Option>
                      </Select> -->
                        <Input v-model="formData.quantity" placeholder="请输入维修部位" class="input-width" />
                      </FormItem>
                    </div>
                  </td>
                </tr>
                <tr class="ivu-table-row">
                  <td colspan="2" class="none-border">
                    <div class="ivu-table-cell">
                      <FormItem prop="unit" label="单位：">
                        <Input v-model="formData.unit" placeholder="请输入维修单位" class="input-width" />
                      </FormItem>
                    </div>
                  </td>
                </tr>
              </template>

              <tr class="ivu-table-row">
                <td colspan="2">
                  <div class="ivu-table-cell">
                    <FormItem>
                      <Button style="width: 100px; margin-right: 20px;" @click="handleSubmit" type="primary"
                        >确认</Button
                      >
                      <Button @click="handleCancle" style="width: 100px;">取消</Button>
                    </FormItem>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </Form>
  </div>
</template>
<script>
import {
  dictionaryQuery,
  machineMonitorCheck,
  machineInstanceQuery,
  machineQuery
} from '@/api/asset/repair/asset-manage'
// import { blobToXls } from '@/libs/blobToXls'
// import { cloneObj } from '@/libs/cloneObj'
import { routeEqual } from '@/libs/util'
import errorCaptured from '@/libs/errorCaptured'
export default {
  name: 'asset_machine_monitor_check',
  data () {
    return {
      formData: {
        machineInstanceSlotNo: '', // 游戏位
        machineInstanceSlotId: '', // 游戏位id
        snCode: '', // 资产编码
        machineInstanceName: '', // 机台名称
        merchantId: '', // 商户id
        shopId: '', // 门店id
        faultLevel: '', // 故障等级
        faultType: '', // 故障类型
        faultStatus: '', // 处理结果
        repairPart: '', // 维修部位
        quantity: '', // 数量
        unit: '', // 单位
        finalReviewStatus: '', // 审核状态
        finalReviewContent: '', // 审核结果
        supplyId: '', // 供应商id
        supplyName: '', // 供应商名称
        machineInstanceId: '' // 机台实例id
      },
      faultLevelKey: [],
      purchaseTypeData: [
        { label: '未处理', value: '0' },
        { label: '已处理', value: '1' },
        { label: '报修', value: '2' }
      ],
      faultStatusList: [
        { label: '未处理', value: '0' },
        { label: '已处理', value: '1' },
        { label: '报修', value: '2' }
      ],
      finalReviewStatus: [
        { label: '不通过', value: '0' },
        { label: '通过', value: '1' }
      ]
      // formRule: {
      //   faultLevel: [{ required: true, message: '请选择故障等级' }],
      //   faultType: [{ required: true, message: '请选择对应故障' }],
      //   faultStatus: [{ required: true, message: '请选择处理结果' }],
      //   repairPart: [{ required: true, message: '请输入维修部位' }],
      //   quantity: [{ required: true, message: '请输入维修数量' }],
      //   unit: [{ required: true, message: '请输入单位' }],
      //   finalReviewStatus: [{ required: true, message: '请选择审核操作' }]
      // }
    }
  },
  computed: {
    faultLevelValue () {
      if (this.faultLevelKey.length && this.formData.faultLevel) {
        return this.faultLevelKey[this.formData.faultLevel - 1].dictValue.map(item => {
          return {
            value: item,
            label: item
          }
        })
      }
      return []
    },
    formRule () {
      if (this.isCheck) {
        return {
          faultStatus: [{ required: true, message: '请选择处理结果' }]
        }
      } else {
        if (Number(this.formData.faultStatus) === 2) {
          return {
            faultLevel: [{ required: true, message: '请选择故障等级' }],
            faultType: [{ required: true, message: '请选择对应故障' }],
            faultStatus: [{ required: true, message: '请选择处理结果' }],
            repairPart: [{ required: true, message: '请输入维修部位' }],
            quantity: [{ required: true, message: '请输入维修数量' }],
            unit: [{ required: true, message: '请输入单位' }]
            // finalReviewStatus: [{ required: true, message: '请选择审核操作' }]
          }
        } else {
          return {
            faultLevel: [{ required: true, message: '请选择故障等级' }],
            faultType: [{ required: true, message: '请选择对应故障' }],
            faultStatus: [{ required: true, message: '请选择处理结果' }]
            // repairPart: [{ required: false, message: '请输入维修部位' }],
            // quantity: [{ required: false, message: '请输入维修数量' }],
            // unit: [{ required: false, message: '请输入单位' }],
            // finalReviewStatus: [{ required: false, message: '请选择审核操作' }]
          }
        }
      }
    }
  },
  wacth: {
    'formData.faultLevel': function () {
      this.formData.faultType = ''
    }
  },
  created () {
    let {
      shopId,
      machineInstanceId,
      machineInstanceSlotId,
      merchantId,
      machineInstanceName,
      machineInstanceSlotNo
    } = this.$route.query
    Object.assign(this.formData, {
      shopId,
      machineInstanceId,
      machineInstanceSlotId,
      merchantId,
      machineInstanceName,
      machineInstanceSlotNo
    })
    // this.formData.machineInstanceName = machineInstanceName
    // this.formData.machineInstanceSlotNo = machineInstanceSlotNo
    // this.formData.machineInstanceId = machineInstanceId
    // this.formData.merchantId = merchantId
    this.dictionaryQuery()
    this.machineInstanceQuery()
  },
  methods: {
    // 获取到故障等级和对象故障
    async dictionaryQuery () {
      let obj = {
        1: '一级',
        2: '二级',
        3: '三级',
        4: '四级'
      }
      const [err, res] = await errorCaptured(dictionaryQuery, { category: 'faultLevel' })
      if (err) return null
      this.faultLevelKey = (res.data.data || []).map(item => {
        item.value = item.dictKey
        item.label = obj[item.dictKey]
        let dictValue = JSON.parse(item.dictValue)
        item.dictValue = dictValue
        return item
      })
      // console.log()
    },
    // 提交表单
    async handleSubmit () {
      this.$refs.formValidate.validate(async valid => {
        if (!valid) return null
        console.log('验证通过')
        this.machineMonitorCheck()
        // if (res.data.status !== 200) return this.$Message.error(res.data.error)
      })
    },
    // 创建故障单
    async machineMonitorCheck () {
      const res = await machineMonitorCheck(this.formData)
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      this.$Message.success('创建成功')
      setTimeout(() => {
        this.$store.commit('closeTag', this.$route)
        this.$store.commit(
          'setTagNavList',
          this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item))
        )
      }, 500)
    },
    // 供应商和资产编码查询
    async machineInstanceQuery () {
      let { machineInstanceId } = this.$route.query
      const res = await machineInstanceQuery({ machineInstanceId })
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      let data = res.data.data || {}
      this.formData.snCode = data.assetCode
      if (data.machineId) this.machineQuery(data.machineId)
    },
    async machineQuery (machineId) {
      const res = await machineQuery({ machineId })
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      let data = res.data.data || {}
      this.formData.supplyId = data.machineSupplierId
      this.formData.supplyName = data.machineSupplierIName
    },
    // 点击去取消
    handleCancle () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit(
        'setTagNavList',
        this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item))
      )
    }
  }
}
</script>
<style lang="less" scoped>
.asset-machine-monitor-check {
  margin: 0 auto;
  padding: 40px 80px;
  .asset-manage-makerpn-info {
    margin: 0 auto;
    max-width: 900px;
  }
  .title {
    display: flex;
    align-items: center;
  }
  .title-icon {
    display: inline-block;
    height: 20px;
    width: 8px;
    background: #2d8cf0;
    margin-right: 10px;
  }

  .upload-list {
    display: inline-block;
    width: 96px;
    height: 96px;
    text-align: center;
    line-height: 96px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
  }
  .upload-list img {
    width: 100%;
    height: 100%;
  }
  .upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
  }
  .upload-list:hover .upload-list-cover {
    display: block;
  }
  .supload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }

  .input-width {
    width: 260px;
  }

  .ivu-table-noborder td {
    border-bottom: none;
  }
  .ivu-table-noborder:before {
    content: '';
    width: 100%;
    height: 0px;
  }
  .ivu-table-noborder:after {
    content: '';
    width: 100%;
    height: 0px;
  }
  .ivu-table-border th,
  .ivu-table-border td {
    border-bottom: 1px solid #e8eaec;
  }
}
</style>
